<script setup lang="ts">

// 页面跳转
const start = () => {
	uni.navigateTo({
		url: '/pagesB/exam/start/start',
	});
};
</script>

<template>
	<view class="container">
		<view class="container_item" v-for="i in 4">
			<view class="container_item_tag">期末考试</view>
			<view class="content">
				<view class="content_title">高等数学期末总复习</view>
				<view class="content_number">45题</view>
				<view class="content_time">2022-12-21 16:00~ 2022-12-21 18:00</view>
			</view>
			<view class="container_item_start" @click="start">开始考试</view>
		</view>
	</view>
</template>

<style scoped lang="scss">
.container {
	padding: 30rpx;
	background-color: #f6f6f6;

	&_item {
		position: relative;
		height: 200rpx;
		border-radius: 10rpx;
		background-color: #fff;
		margin-bottom: 25rpx;
		@include flex(space-around);

		&_tag {
			position: absolute;
			border-radius: 10rpx;
			opacity: 0.7;
			top: 15rpx;
			left: 15rpx;
			padding: 5rpx;
			font-size: 20rpx;
			color: $bgcolor;
		}

		.content {
			&_title {
				font-weight: 600;
			}

			&_number {
				font-size: 20rpx;
			}

			&_time {
				position: absolute;
				bottom: 10rpx;
				left: 15rpx;
				color: #616161;
				font-size: 20rpx;
			}
		}

		&_start {
			width: 180rpx;
			height: 60rpx;
			border-radius: 10rpx;
			font-size: 25rpx;
			background-color: $bgcolor;
			color: #ffffff;
			line-height: 60rpx;
			text-align: center;
		}
	}
}
</style>
